---
import Layout from "../layouts/Layout.astro";
import ImgAndText from "../components/ImgAndText.astro";
---

<Layout title="Dewhale - GitHub-Powered AI for Effortless Development">
  <main>
    <div class="container">
      <div class="hero">
        <div class="text">
          <img src="/logo.png" class="logo" />
          <h1>Dewhale</h1>
          <p>Dewhale is a GitHub-Powered AI for effortless development.</p>
        </div>
        <div class="buttons">
          <a
            class="button"
            href="https://github.com/Yuyz0112/dewhale/blob/main/docs/quick-start.md"
            target="_blank">Quick Start</a
          >
          <a
            class="button"
            href="https://github.com/Yuyz0112/dewhale"
            target="_blank">Source Code</a
          >
        </div>
      </div>
      <div class="section">
        <h3 class="section-title">Start the Journey</h3>
        <ImgAndText
          img="https://pub-92e90cabe8b8410dbb5e46d17a83dce2.r2.dev/vx-website/images/1.png"
          align="left"
        >
          <div slot="quote">
            As a user, describe your needs in the way you are most used to -
            submit a <strong>Github issue</strong>.
          </div>
        </ImgAndText>

        <ImgAndText
          img="https://pub-92e90cabe8b8410dbb5e46d17a83dce2.r2.dev/vx-website/images/2.png"
          align="right"
        >
          <div slot="quote">
            Choose a code generation mode through the <strong
              >issue template</strong
            >.
            <br />
            Dewhale currently supports generating UI code based on React, Vue, and
            Svelte. You can also add your own custom code generation modes at any
            time.
          </div>
        </ImgAndText>

        <ImgAndText
          img="https://pub-92e90cabe8b8410dbb5e46d17a83dce2.r2.dev/vx-website/images/3.png"
          align="left"
        >
          <div slot="quote">
            Describe your needs in the Issue, both images and text are
            acceptable.
            <br />
            In Dewhale, we have designed a strict permission mechanism.
            <br />
            By default, only Issues submitted by whitelisted users will trigger generation.
            However, we also provide flexible and powerful quota management capabilities.
          </div>
        </ImgAndText>

        <ImgAndText
          img="https://pub-92e90cabe8b8410dbb5e46d17a83dce2.r2.dev/vx-website/images/4.png"
          align="right"
        >
          <div slot="quote">
            After submitting the issue, the code generation <strong
              >Github Action</strong
            > will be triggered.
          </div>
        </ImgAndText>

        <ImgAndText
          img="https://pub-92e90cabe8b8410dbb5e46d17a83dce2.r2.dev/vx-website/images/5.png"
          align="left"
        >
          <div slot="quote">
            In moments, it runs successfully through a transparent process,
            leveraging workflows users know to facilitate observability and
            troubleshooting.
          </div>
        </ImgAndText>

        <ImgAndText
          img="https://pub-92e90cabe8b8410dbb5e46d17a83dce2.r2.dev/vx-website/images/6.png"
          align="right"
        >
          <div slot="quote">
            The generated code is presented in the most intuitive and familiar
            way: a <strong>pull request</strong>.
            <br />
            Integrated with your favorite code deployment platform for instant previews.
          </div>
        </ImgAndText>

        <ImgAndText
          img="https://pub-92e90cabe8b8410dbb5e46d17a83dce2.r2.dev/vx-website/images/7.png"
          align="left"
        >
          <div slot="quote">
            In the preview UI, you can visually review the generated results and
            copy the code.
          </div>
        </ImgAndText>

        <ImgAndText
          img="https://pub-92e90cabe8b8410dbb5e46d17a83dce2.r2.dev/vx-website/images/8.png"
          align="right"
        >
          <div slot="quote">
            When you want to modify requirements, you can continue the
            conversation in the pull request.
          </div>
        </ImgAndText>

        <ImgAndText
          img="https://pub-92e90cabe8b8410dbb5e46d17a83dce2.r2.dev/vx-website/images/9.png"
          align="left"
        >
          <div slot="quote">
            According to your latest instructions, the visual style of the UI
            generated again and remains consistent.
          </div>
        </ImgAndText>

        <ImgAndText
          img="https://pub-92e90cabe8b8410dbb5e46d17a83dce2.r2.dev/vx-website/images/10.png"
          align="right"
        >
          <div slot="quote">
            Want to direct the AI to modify the code more precisely?
            <br />
            Use the most intuitive method you can imagine: <strong
              >code review</strong
            >.
          </div>
        </ImgAndText>

        <ImgAndText
          img="https://pub-92e90cabe8b8410dbb5e46d17a83dce2.r2.dev/vx-website/images/11.png"
          align="left"
        >
          <div slot="quote">It works like a charm.</div>
        </ImgAndText>

        <ImgAndText
          img="https://pub-92e90cabe8b8410dbb5e46d17a83dce2.r2.dev/vx-website/images/12.png"
          align="right"
        >
          <div slot="quote">
            Dewhale is GitHub-powered, so you obviously don't need to worry
            about <strong>version control</strong>.
          </div>
        </ImgAndText>

        <ImgAndText
          img="https://pub-92e90cabe8b8410dbb5e46d17a83dce2.r2.dev/vx-website/images/13.png"
          align="left"
        >
          <div slot="quote">
            "<strong>Self-deployment</strong>" is even easier, just fork the
            repository and configure your openAI API key and Github Token
            according to the guide.
          </div>
        </ImgAndText>

        <ImgAndText
          img="https://pub-92e90cabe8b8410dbb5e46d17a83dce2.r2.dev/vx-website/images/14.png"
          align="right"
        >
          <div slot="quote">
            Based on flexible and powerful quota management capabilities, you
            can set usage limits for different users and groups.
            <br />
            Instead of developing your own trial and subscription systems, why not
            use Github Stargazers and Sponsors?
          </div>
        </ImgAndText>
      </div>

      <div class="section">
        <h3 class="section-title">Happy Hacking</h3>

        <div class="hero">
          <div class="text">
            <p>
              If you like the design philosophy of Dewhale, feel free to follow:
            </p>
          </div>
          <div class="buttons">
            <a
              class="button"
              href="https://github.com/Yuyz0112/dewhale/blob/main/docs/quick-start.md"
              target="_blank">Github Discussions</a
            >
            <a
              class="button"
              href="https://twitter.com/Aryu0112"
              target="_blank">X.com</a
            >
          </div>
        </div>
      </div>
    </div>
  </main>
</Layout>

<style>
  main {
    background-color: #323444;
  }

  @media screen and (min-width: 1460px) {
    main {
      padding: 60px 0;
    }

    .container {
      box-shadow: -1px 1px 30px 4px rgba(0, 0, 0, 0.75);
    }
  }

  @media screen and (max-width: 960px) {
    .hero h1 {
      font-size: 4rem;
    }
  }

  .container {
    max-width: 1440px;
    background-color: #fff;
    margin: 0 auto;
    padding: 1rem;
  }

  .hero {
    position: relative;
    margin: 0 auto;
    overflow: hidden;

    .text {
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      position: relative;
      z-index: 3;
    }

    .logo {
      margin: 0 auto;
      margin-top: 1rem;
      width: 128px;
      height: 128px;
    }

    h1 {
      text-align: center;
      font-size: 6rem;
      font-family: "Rubik Doodle Shadow", "Rubik", system-ui;
      margin-bottom: 1rem;
      margin-top: 1rem;
    }

    p {
      font-size: 2rem;
      margin: 0;
    }

    .buttons {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      z-index: 3;
      position: relative;
      margin-top: 2rem;
    }

    .button {
      padding: 10px 20px;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
      outline: none;
      color: black;
      background-color: white;
      border-radius: 5px;
      transition:
        background-color 0.3s,
        box-shadow 0.3s;
      border: 1px solid #323444;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    a {
      color: #black;
    }

    a:visited,
    a:active,
    a:focus {
      color: #black;
    }
  }

  .section {
    margin-top: 2rem;
    width: 100%;

    .section-title {
      font-size: 2rem;
      margin-bottom: 1rem;
      margin-top: 1rem;
      position: relative;
      font-family: "Rubik Doodle Shadow", "Rubik", system-ui;

      &::after {
        content: "";
        width: 100px;
        height: 2px;
        background-color: #323444;
        position: absolute;
        bottom: -14px;
        left: 0;
      }
    }
  }
</style>
